package work.endlove.kuikly_demo.pages

import com.tencent.kuikly.core.annotations.Page
import com.tencent.kuikly.core.base.Color
import com.tencent.kuikly.core.base.ViewBuilder
import com.tencent.kuikly.core.directives.vfor
import com.tencent.kuikly.core.pager.Pager
import com.tencent.kuikly.core.reactive.handler.observable
import com.tencent.kuikly.core.reactive.handler.observableList
import com.tencent.kuikly.core.views.Image
import com.tencent.kuikly.core.views.List
import com.tencent.kuikly.core.views.Text
import com.tencent.kuikly.core.views.View
import com.tencent.kuikly.core.views.compose.Button

/*
我们先通过by observableList<T>声明了一个响应式容器,
并在List组件下将容器绑定在vfor语句的闭包中,
让List的列表具有自动更新的能力。
例如，一开始我们往数据list容器添加10个数据，
因此当开始运行的时候，List组件下会有10个Item。
当我们在运行时的某个时刻往数据list中再添加一个数据，
此时你会发现List组件会自动创建第11个Item。

---

通过按钮调用的时候，设定 ctx = this
后续直接使用 this 可以确保拿到对应状态
* */

@Page("hello_3")
internal class HelloTreePage : Pager() {

    // 响应式容器
    private val list by observableList<String>()
    private var counter by observable(0)

    override fun created() {
        super.created()
        // mock data
        for (i in 0 until 10) {
            list.add(i.toString())
            counter++
        }
    }

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            attr {
                backgroundColor(Color.WHITE)
            }

            List {
                attr {
                    flex(1f)
                }

                vfor({ ctx.list }) { item ->
                    View {
                        attr {
                            flexDirectionRow()
                            margin(20f)
                        }

                        Text {
                            attr {
                                text(item)
                                fontSize(20f)
                                fontWeightBold()
                            }
                        }

                        Image {
                            attr {
                                marginLeft(20f)
                                size(50f, 50f)
                                src("https://vfiles.gtimg.cn/wupload/xy/componenthub/TbyiIqBP.jpeg")
                            }
                        }
                    }
                }
            }

            Button {
                attr {
                    absolutePosition(bottom = 30f, right = 30f)
                    size(80f, 80f)

                    borderRadius(10f)
                    backgroundColor(Color.BLUE)

                    titleAttr {
                        text("点击更新")
                        fontSize(15f)
                        color(Color.WHITE)
                        fontWeightBold()
                    }
                }

                event {
                    click {
                        ctx.list.add(
                            (ctx.list.size + 1).toString()
                        )
                    }
                }
            }

        }
    }
}